// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    // 处理页面加载动画
    const loaderWrapper = document.querySelector('.loader-wrapper');
    setTimeout(() => {
        loaderWrapper.style.opacity = '0';
        setTimeout(() => {
            loaderWrapper.style.display = 'none';
        }, 500);
    }, 1500);

    // 导航菜单切换
    const menuToggle = document.querySelector('.menu-toggle');
    const navLinks = document.querySelector('.nav-links');
    const navButtons = document.querySelector('.nav-buttons');

    menuToggle.addEventListener('click', () => {
        // 创建移动端导航菜单
        if (!document.querySelector('.mobile-nav')) {
            const mobileNav = document.createElement('div');
            mobileNav.className = 'mobile-nav';
            
            // 克隆导航链接和按钮
            const navLinksClone = navLinks.cloneNode(true);
            const loginBtn = document.querySelector('.login-btn').cloneNode(true);
            const signupBtn = document.querySelector('.signup-btn').cloneNode(true);
            
            // 添加到移动导航中
            mobileNav.appendChild(navLinksClone);
            
            const mobileButtons = document.createElement('div');
            mobileButtons.className = 'mobile-buttons';
            mobileButtons.appendChild(loginBtn);
            mobileButtons.appendChild(signupBtn);
            
            mobileNav.appendChild(mobileButtons);
            
            // 添加关闭按钮
            const closeBtn = document.createElement('div');
            closeBtn.className = 'close-btn';
            closeBtn.innerHTML = '<i class="fas fa-times"></i>';
            mobileNav.appendChild(closeBtn);
            
            // 将移动导航添加到页面
            document.body.appendChild(mobileNav);
            
            // 添加关闭按钮事件
            closeBtn.addEventListener('click', () => {
                mobileNav.classList.remove('active');
                document.body.classList.remove('nav-open');
                setTimeout(() => {
                    mobileNav.remove();
                }, 300);
            });

            // 为移动导航中的链接添加点击事件
            const mobileLinks = mobileNav.querySelectorAll('a');
            mobileLinks.forEach(link => {
                link.addEventListener('click', () => {
                    mobileNav.classList.remove('active');
                    document.body.classList.remove('nav-open');
                    setTimeout(() => {
                        mobileNav.remove();
                    }, 300);
                });
            });
            
            // 添加CSS
            const style = document.createElement('style');
            style.innerHTML = `
                .mobile-nav {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                    z-index: 1000;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    transform: translateX(100%);
                    transition: transform 0.3s ease;
                }
                
                .mobile-nav.active {
                    transform: translateX(0);
                }
                
                .mobile-nav .nav-links {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 20px;
                    margin-bottom: 30px;
                }
                
                .mobile-nav .nav-links a {
                    font-size: 24px;
                }
                
                .mobile-buttons {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                }
                
                .mobile-buttons button {
                    width: 200px;
                    height: 50px;
                    font-size: 18px;
                }
                
                .close-btn {
                    position: absolute;
                    top: 20px;
                    right: 20px;
                    font-size: 30px;
                    cursor: pointer;
                }
                
                body.nav-open {
                    overflow: hidden;
                }
            `;
            
            document.head.appendChild(style);
            
            // 显示移动导航
            setTimeout(() => {
                mobileNav.classList.add('active');
                document.body.classList.add('nav-open');
            }, 10);
        } else {
            // 如果已存在，则切换显示状态
            const mobileNav = document.querySelector('.mobile-nav');
            if (mobileNav.classList.contains('active')) {
                mobileNav.classList.remove('active');
                document.body.classList.remove('nav-open');
                setTimeout(() => {
                    mobileNav.remove();
                }, 300);
            } else {
                mobileNav.classList.add('active');
                document.body.classList.add('nav-open');
            }
        }
    });

    // 平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId === '#') return;
            
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                const offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });

    // 动态添加活跃类到导航链接
    const navItems = document.querySelectorAll('.nav-links a');
    const sections = document.querySelectorAll('section');
    
    window.addEventListener('scroll', () => {
        let current = '';
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            if (pageYOffset >= (sectionTop - sectionHeight / 3)) {
                current = section.getAttribute('id');
            }
        });
        
        navItems.forEach(item => {
            item.classList.remove('active');
            if (item.getAttribute('href') === `#${current}`) {
                item.classList.add('active');
            }
        });
    });

    // 按钮动画效果
    const buttons = document.querySelectorAll('button');
    buttons.forEach(button => {
        button.addEventListener('mousedown', () => {
            button.style.transform = 'scale(0.95)';
        });
        
        button.addEventListener('mouseup', () => {
            button.style.transform = '';
        });
        
        button.addEventListener('mouseleave', () => {
            button.style.transform = '';
        });
    });

    // 添加视差滚动效果
    const hero = document.querySelector('.hero');
    window.addEventListener('scroll', () => {
        const scrollPosition = window.pageYOffset;
        if (scrollPosition < hero.offsetHeight) {
            const elements = document.querySelectorAll('.floating-element');
            elements.forEach((el, index) => {
                el.style.transform = `translateY(${scrollPosition * (0.1 + index * 0.05)}px)`;
            });
        }
    });

    // 为特性卡片添加鼠标移动效果
    const featureCards = document.querySelectorAll('.feature-card');
    featureCards.forEach(card => {
        card.addEventListener('mousemove', (e) => {
            const rect = card.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const deltaX = (x - centerX) / centerX * 10;
            const deltaY = (y - centerY) / centerY * 10;
            
            card.style.transform = `perspective(1000px) rotateX(${-deltaY}deg) rotateY(${deltaX}deg) translateY(-5px)`;
        });
        
        card.addEventListener('mouseleave', () => {
            card.style.transform = '';
            setTimeout(() => {
                card.style.transition = 'transform 0.3s ease';
            }, 100);
        });
        
        card.addEventListener('mouseenter', () => {
            card.style.transition = 'transform 0.1s ease';
        });
    });

    // 模拟点击体验按钮的弹窗效果
    const ctaButtons = document.querySelectorAll('.primary-btn, .cta-btn');
    ctaButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 创建模态框
            const modal = document.createElement('div');
            modal.className = 'modal';
            modal.innerHTML = `
                <div class="modal-content">
                    <div class="modal-header">
                        <h3>开始体验智能互动</h3>
                        <span class="modal-close">&times;</span>
                    </div>
                    <div class="modal-body">
                        <form class="demo-form">
                            <div class="form-group">
                                <label for="name">您的姓名</label>
                                <input type="text" id="name" placeholder="请输入您的姓名">
                            </div>
                            <div class="form-group">
                                <label for="email">电子邮箱</label>
                                <input type="email" id="email" placeholder="请输入您的电子邮箱">
                            </div>
                            <div class="form-group">
                                <label for="company">公司名称</label>
                                <input type="text" id="company" placeholder="请输入您的公司名称">
                            </div>
                            <button type="submit" class="submit-btn">获取演示</button>
                        </form>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
            
            // 添加CSS
            const style = document.createElement('style');
            style.innerHTML = `
                .modal {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    z-index: 1000;
                    opacity: 0;
                    transition: opacity 0.3s ease;
                }
                
                .modal-content {
                    background-color: #fff;
                    border-radius: 10px;
                    width: 90%;
                    max-width: 500px;
                    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
                    transform: translateY(20px);
                    transition: transform 0.3s ease;
                }
                
                .modal-header {
                    padding: 20px;
                    border-bottom: 1px solid #eee;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                
                .modal-header h3 {
                    font-size: 1.5rem;
                    color: var(--dark-color);
                }
                
                .modal-close {
                    font-size: 1.8rem;
                    cursor: pointer;
                    color: var(--gray-color);
                }
                
                .modal-body {
                    padding: 20px;
                }
                
                .demo-form {
                    display: flex;
                    flex-direction: column;
                    gap: 15px;
                }
                
                .form-group {
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                }
                
                .form-group label {
                    font-size: 0.9rem;
                    color: var(--gray-color);
                }
                
                .form-group input {
                    padding: 12px;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    font-size: 1rem;
                }
                
                .submit-btn {
                    background-color: var(--primary-color);
                    color: white;
                    padding: 12px;
                    border-radius: 6px;
                    font-size: 1rem;
                    margin-top: 10px;
                    transition: var(--transition);
                }
                
                .submit-btn:hover {
                    background-color: var(--secondary-color);
                }
            `;
            
            document.head.appendChild(style);
            
            // 显示模态框
            setTimeout(() => {
                modal.style.opacity = '1';
                modal.querySelector('.modal-content').style.transform = 'translateY(0)';
            }, 10);
            
            // 关闭模态框
            const closeModal = () => {
                modal.style.opacity = '0';
                modal.querySelector('.modal-content').style.transform = 'translateY(20px)';
                setTimeout(() => {
                    modal.remove();
                    style.remove();
                }, 300);
            };
            
            modal.querySelector('.modal-close').addEventListener('click', closeModal);
            modal.addEventListener('click', (e) => {
                if (e.target === modal) {
                    closeModal();
                }
            });
            
            // 处理表单提交
            modal.querySelector('.demo-form').addEventListener('submit', (e) => {
                e.preventDefault();
                
                const name = modal.querySelector('#name').value;
                const email = modal.querySelector('#email').value;
                const company = modal.querySelector('#company').value;
                
                if (!name || !email) {
                    alert('请填写必要信息');
                    return;
                }
                
                // 提交成功后显示感谢信息
                modal.querySelector('.modal-body').innerHTML = `
                    <div class="success-message">
                        <div class="success-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <h3>感谢您的申请！</h3>
                        <p>我们的团队将会尽快与您联系，为您展示智能互动系统的强大功能。</p>
                    </div>
                `;
                
                // 添加成功信息的样式
                const successStyle = document.createElement('style');
                successStyle.innerHTML = `
                    .success-message {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        padding: 20px 0;
                    }
                    
                    .success-icon {
                        width: 70px;
                        height: 70px;
                        border-radius: 50%;
                        background-color: var(--success-color);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-bottom: 20px;
                    }
                    
                    .success-icon i {
                        color: white;
                        font-size: 36px;
                    }
                    
                    .success-message h3 {
                        font-size: 1.4rem;
                        color: var(--dark-color);
                        margin-bottom: 10px;
                    }
                    
                    .success-message p {
                        color: var(--gray-color);
                        line-height: 1.6;
                    }
                `;
                
                document.head.appendChild(successStyle);
                
                // 3秒后自动关闭
                setTimeout(closeModal, 3000);
            });
        });
    });
}); 